<template>
  <div>
    <div class="demo-inner-divider">spin type</div>
    <div class="spin" >
      <div >
        <p>样式1: default（默认）</p>
        <e-spin
          :show="showSpin"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>样式2: dot</p>
        <e-spin
          :show="showSpin"
          type="dot"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>样式3: circular</p>
        <e-spin
          :show="showSpin"
          type="circular"
          size="large">
        </e-spin>
      </div>
    </div>
    <div class="demo-inner-divider">spin size</div>
    <div class="spin" >
      <div>
        <p>large</p>
        <e-spin
          :show="showSpin"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>middle（默认）</p>
        <e-spin
          :show="showSpin">
        </e-spin>
      </div>
      <div>
        <p>small</p>
        <e-spin
          :show="showSpin"
          size="small">
        </e-spin>
      </div>
    </div>
    <div class="spin" >
      <div>
        <p>large</p>
        <e-spin
          :show="showSpin"
          type="dot"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>middle（默认）</p>
        <e-spin
          type="dot"
          :show="showSpin">
        </e-spin>
      </div>
      <div>
        <p>small</p>
        <e-spin
          :show="showSpin"
          type="dot"
          size="small">
        </e-spin>
      </div>
      <div>
        <p>mini</p>
        <e-spin
          :show="showSpin"
          type="dot"
          size="mini">
        </e-spin>
      </div>
    </div>
    <div class="spin" >
      <div>
        <p>large</p>
        <e-spin
          :show="showSpin"
          type="circular"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>middle（默认）</p>
        <e-spin
          type="circular"
          :show="showSpin">
        </e-spin>
      </div>
      <div>
        <p>small</p>
        <e-spin
          :show="showSpin"
          type="circular"
          size="small">
        </e-spin>
      </div>
      <div>
        <p>mini</p>
        <e-spin
          :show="showSpin"
          type="circular"
          size="mini">
        </e-spin>
      </div>
    </div>
    <div class="spin" >
      <div>
        <p>large</p>
        <e-spin
          :show="showSpin"
          color="gray"
          type="circular"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>middle（默认）</p>
        <e-spin
          type="circular"
          color="gray"
          :show="showSpin">
        </e-spin>
      </div>
      <div>
        <p>small</p>
        <e-spin
          :show="showSpin"
          type="circular"
          color="gray"
          size="small">
        </e-spin>
      </div>
      <div>
        <p>mini</p>
        <e-spin
          :show="showSpin"
          type="circular"
          color="gray"
          size="mini">
        </e-spin>
      </div>
    </div>
    <div class="spin" >
      <div>
        <p>large</p>
        <e-spin
          :show="showSpin"
          type="circular"
          color="white"
          size="large">
        </e-spin>
      </div>
      <div>
        <p>middle（默认）</p>
        <e-spin
          type="circular"
          color="white"
          :show="showSpin">
        </e-spin>
      </div>
      <div>
        <p>small</p>
        <e-spin
          :show="showSpin"
          type="circular"
          color="white"
          size="small">
        </e-spin>
      </div>
      <div>
        <p>mini</p>
        <e-spin
          :show="showSpin"
          type="circular"
          color="white"
          size="mini">
        </e-spin>
      </div>
    </div>
    <div class="demo-inner-divider">spin size</div>
    <div class="spin">
      <div style="position: relative;">
        <e-spin
          :show="showSpin"
          color="gray"
          type="circular"
          :fix="isFix"
          size="large">
        </e-spin>
      </div>
      <e-button @click="toggleFullscreenAndFix">切换fullscreen 和 fix</e-button><e-button @click="showSpin = !showSpin">隐藏显示spin</e-button>
    </div>
    <spin-md class="markdown-body"></spin-md>
  </div>
</template>
<script>
import spinMd from '../../docs/spin.md';

export default {
  name: 'DemoSpin',
  components: { spinMd },
  data () {
    return {
      isFix: false,
      showSpin: true
    }
  },
  methods: {
    showFullscreen () {
      this.$Spin.show()
      setTimeout(this.hideFullscreen, 3000)
    },
    hideFullscreen () {
      this.$Spin.hide()
    },
    toggleFullscreenAndFix () {
      if (!this.isFix) {
        this.showFullscreen()
      } else {
        this.isFix = !this.isFix
      }
    }
  }
}
</script>
<style scoped>
.spin{
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.spin > div{
    margin-right: 50px ;
  }
.spin p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}
</style>
